<script setup>
import { ref, onMounted } from 'vue'

const symptomList = ref([])
const showAddModal = ref(false)
const newSymptom = ref({
  type: '',
  severity: 'medium',
  time: '',
  description: '',
  date: ''
})

const symptomTypes = [
  '头痛',
  '咳嗽',
  '发热',
  '乏力',
  '腹痛',
  '腹泻',
  '恶心',
  '呕吐',
  '头晕',
  '失眠',
  '关节痛',
  '其他'
]

const severityOptions = [
  { value: 'mild', label: '轻微' },
  { value: 'medium', label: '中度' },
  { value: 'severe', label: '严重' }
]

onMounted(() => {
  // 从本地存储加载症状记录
  const savedSymptoms = uni.getStorageSync('symptomRecords') || []
  symptomList.value = savedSymptoms
})

function openAddModal() {
  // 设置默认日期和时间为当前
  const now = new Date()
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  const hours = String(now.getHours()).padStart(2, '0')
  const minutes = String(now.getMinutes()).padStart(2, '0')
  
  newSymptom.value = {
    type: '',
    severity: 'medium',
    time: `${hours}:${minutes}`,
    description: '',
    date: `${year}-${month}-${day}`
  }
  
  showAddModal.value = true
}

function closeAddModal() {
  showAddModal.value = false
}

function addSymptom() {
  if (!newSymptom.value.type) {
    uni.showToast({
      title: '请选择症状类型',
      icon: 'none'
    })
    return
  }
  
  // 创建新症状记录
  const symptomRecord = {
    id: Date.now(),
    type: newSymptom.value.type,
    severity: newSymptom.value.severity,
    time: newSymptom.value.time,
    description: newSymptom.value.description,
    date: newSymptom.value.date,
    createdAt: new Date().toISOString()
  }
  
  // 添加到列表
  symptomList.value.unshift(symptomRecord)
  
  // 保存到本地存储
  uni.setStorageSync('symptomRecords', symptomList.value)
  
  uni.showToast({
    title: '添加成功',
    icon: 'success'
  })
  
  closeAddModal()
}

function deleteSymptom(id) {
  uni.showModal({
    title: '确认删除',
    content: '确定要删除这条症状记录吗？',
    success: (res) => {
      if (res.confirm) {
        symptomList.value = symptomList.value.filter(item => item.id !== id)
        
        // 更新本地存储
        uni.setStorageSync('symptomRecords', symptomList.value)
        
        uni.showToast({
          title: '删除成功',
          icon: 'success'
        })
      }
    }
  })
}

function getSeverityClass(severity) {
  switch (severity) {
    case 'mild':
      return 'severity-mild'
    case 'medium':
      return 'severity-medium'
    case 'severe':
      return 'severity-severe'
    default:
      return ''
  }
}

function getSeverityLabel(severity) {
  const option = severityOptions.find(opt => opt.value === severity)
  return option ? option.label : ''
}
</script>

<template>
  <view class="container">
    <view class="header">
      <view class="title">症状记录</view>
      <view class="subtitle">记录您的健康症状变化</view>
    </view>
    
    <view class="action-bar">
      <button class="add-btn" @click="openAddModal">添加症状记录</button>
    </view>
    
    <view v-if="symptomList.length === 0" class="empty-state">
      <view class="empty-icon">📝</view>
      <view class="empty-text">暂无症状记录</view>
      <view class="empty-subtext">点击上方按钮添加症状记录</view>
    </view>
    
    <view v-else class="symptom-list">
      <view 
        v-for="symptom in symptomList" 
        :key="symptom.id"
        class="symptom-item"
      >
        <view class="symptom-header">
          <view class="symptom-type">{{ symptom.type }}</view>
          <view :class="['symptom-severity', getSeverityClass(symptom.severity)]">
            {{ getSeverityLabel(symptom.severity) }}
          </view>
        </view>
        
        <view class="symptom-time">
          <text>{{ symptom.date }} {{ symptom.time }}</text>
        </view>
        
        <view v-if="symptom.description" class="symptom-desc">
          <text>{{ symptom.description }}</text>
        </view>
        
        <view class="symptom-actions">
          <view class="delete-btn" @click="deleteSymptom(symptom.id)">删除</view>
        </view>
      </view>
    </view>
    
    <!-- 添加症状弹窗 -->
    <view v-if="showAddModal" class="modal-overlay">
      <view class="modal-content">
        <view class="modal-header">
          <view class="modal-title">添加症状记录</view>
          <view class="modal-close" @click="closeAddModal">×</view>
        </view>
        
        <view class="modal-body">
          <view class="form-item">
            <text class="form-label">症状类型</text>
            <picker 
              :range="symptomTypes" 
              @change="e => newSymptom.type = symptomTypes[e.detail.value]"
              class="picker"
            >
              <view class="picker-value">{{ newSymptom.type || '请选择症状类型' }}</view>
            </picker>
          </view>
          
          <view class="form-item">
            <text class="form-label">严重程度</text>
            <view class="severity-selector">
              <view 
                v-for="option in severityOptions" 
                :key="option.value"
                :class="['severity-option', { active: newSymptom.severity === option.value }]"
                @click="newSymptom.severity = option.value"
              >
                {{ option.label }}
              </view>
            </view>
          </view>
          
          <view class="form-item">
            <text class="form-label">日期</text>
            <picker 
              mode="date" 
              :value="newSymptom.date"
              @change="e => newSymptom.date = e.detail.value"
              class="picker"
            >
              <view class="picker-value">{{ newSymptom.date }}</view>
            </picker>
          </view>
          
          <view class="form-item">
            <text class="form-label">时间</text>
            <picker 
              mode="time" 
              :value="newSymptom.time"
              @change="e => newSymptom.time = e.detail.value"
              class="picker"
            >
              <view class="picker-value">{{ newSymptom.time }}</view>
            </picker>
          </view>
          
          <view class="form-item">
            <text class="form-label">症状描述</text>
            <textarea 
              class="textarea" 
              v-model="newSymptom.description" 
              placeholder="请描述症状的具体情况（选填）"
            />
          </view>
        </view>
        
        <view class="modal-footer">
          <button class="cancel-btn" @click="closeAddModal">取消</button>
          <button class="confirm-btn" @click="addSymptom">确认</button>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  margin-bottom: 30rpx;
  
  .title {
    font-size: 40rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 10rpx;
  }
  
  .subtitle {
    font-size: 28rpx;
    color: #666;
  }
}

.action-bar {
  margin-bottom: 30rpx;
  
  .add-btn {
    background-color: #4caf50;
    color: #fff;
    font-size: 28rpx;
    padding: 15rpx 0;
    border-radius: 8rpx;
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  
  .empty-icon {
    font-size: 80rpx;
    margin-bottom: 20rpx;
  }
  
  .empty-text {
    font-size: 32rpx;
    color: #333;
    margin-bottom: 10rpx;
  }
  
  .empty-subtext {
    font-size: 26rpx;
    color: #999;
  }
}

.symptom-list {
  .symptom-item {
    background-color: #fff;
    border-radius: 12rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
  }
  
  .symptom-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10rpx;
    
    .symptom-type {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
    
    .symptom-severity {
      font-size: 24rpx;
      padding: 4rpx 12rpx;
      border-radius: 20rpx;
      
      &.severity-mild {
        background-color: #e8f5e9;
        color: #4caf50;
      }
      
      &.severity-medium {
        background-color: #fff8e1;
        color: #ffc107;
      }
      
      &.severity-severe {
        background-color: #ffebee;
        color: #f44336;
      }
    }
  }
  
  .symptom-time {
    font-size: 26rpx;
    color: #666;
    margin-bottom: 10rpx;
  }
  
  .symptom-desc {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 15rpx;
    line-height: 1.5;
  }
  
  .symptom-actions {
    display: flex;
    justify-content: flex-end;
    
    .delete-btn {
      font-size: 26rpx;
      color: #f44336;
      padding: 6rpx 12rpx;
    }
  }
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.modal-content {
  width: 90%;
  max-height: 80vh;
  background-color: #fff;
  border-radius: 12rpx;
  overflow: hidden;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  border-bottom: 1px solid #eee;
  
  .modal-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }
  
  .modal-close {
    font-size: 40rpx;
    color: #999;
    line-height: 1;
  }
}

.modal-body {
  padding: 30rpx;
  max-height: 60vh;
  overflow-y: auto;
}

.form-item {
  margin-bottom: 25rpx;
  
  .form-label {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 10rpx;
    display: block;
  }
  
  .picker {
    border: 1px solid #ddd;
    border-radius: 8rpx;
    padding: 15rpx;
    font-size: 28rpx;
    
    .picker-value {
      color: #333;
    }
  }
  
  .textarea {
    width: 100%;
    height: 150rpx;
    border: 1px solid #ddd;
    border-radius: 8rpx;
    padding: 15rpx;
    font-size: 28rpx;
    box-sizing: border-box;
  }
}

.severity-selector {
  display: flex;
  
  .severity-option {
    flex: 1;
    text-align: center;
    padding: 15rpx 0;
    border: 1px solid #ddd;
    font-size: 28rpx;
    color: #666;
    
    &:first-child {
      border-radius: 8rpx 0 0 8rpx;
    }
    
    &:last-child {
      border-radius: 0 8rpx 8rpx 0;
    }
    
    &.active {
      background-color: #4caf50;
      color: #fff;
      border-color: #4caf50;
    }
  }
}

.modal-footer {
  display: flex;
  padding: 20rpx 30rpx;
  border-top: 1px solid #eee;
  
  .cancel-btn, .confirm-btn {
    flex: 1;
    margin: 0 10rpx;
    font-size: 28rpx;
    padding: 15rpx 0;
  }
  
  .cancel-btn {
    background-color: #f5f5f5;
    color: #666;
  }
  
  .confirm-btn {
    background-color: #4caf50;
    color: #fff;
  }
}
</style>